<template>
  <!-- 油站排序、站长喊话专用 -->
  <div class="adv-one-wrapper">
    <div class="top g-flex-row">
      <div class="left-box">
        <img :src="ossUrl+'market/chart-sort.png'" class="img"/>
      </div>
      <div class="right-box g-flex-c">
        <div class="g-flex-column-v-center middle">
          <span v-for="(item,index) in caseText" :key="index" class="tips">
            {{item}}
          </span>
        </div>
      </div>
    </div>
    <div class="bottom g-flex-sa" v-if="info && info.length">
      <label-item v-for="(item,index) in info" :key="index" :label="'油站排序位置'+item.customLocation+'剩余可用天数'" :text="item.num"></label-item>
    </div>
  </div>
</template>
<script>
import {ossUrl} from '@/utils/config'
import LabelItem from './LabelItem'
import sizeChangeMix from '../onResize/mixin'
export default {
  props:{
    caseText:{
      type: Array,
      default: () => []
    },
    info:{
      type: Array,
      default: () => []
    }
  },
  components:{
    LabelItem
  },
  mixins:[sizeChangeMix],
  data(){
    return{
      ossUrl,
      bannerHeight: 280
    }
  }
}
</script>
<style lang="less" scoped>
.adv-one-wrapper{
  width: 100%;
  padding: 30px 30px 20px;
  background: #FFFFFF;
  box-sizing: border-box;
  margin-bottom: 10px;
  .top{
    width: 100%;
    max-height: 320px;
    margin-bottom: 17px;
    .left-box{
      width: 60%;
    }
    .img{
      width: 100%;
      height: 100%;
    }
    .right-box{
      width: 40%;
    }
    .middle{
      width: 100%;
      height: 224px;
      margin-left: 53px;
      background: #F3F5FC;
      border-radius: 10px;
      padding: 25px 30px;
      font-size: 16px;
      color: #3A3874;
    }
    .tips{
      padding: 3px 0;
    }
  }
  .bottom{
    height: 68px;
      background: #C9EEEA;
      border-radius: 6px;
      padding: 16px 50px;
    }
}
</style>